<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <div class="mainbox">
      <div style="height: 50px;" v-show="isShow">
        <Navbar />
      </div>
      <div class="miancenter">
        <router-view />
      </div>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { useSettingsStore } from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import { useAppStore } from '@/store/modules/app';
import Navbar from "@/layout/components/Navbar.vue";
import { useRoute } from 'vue-router';
const route = useRoute();
const appStore = useAppStore();
const isShow = ref<boolean>(true);
const whiteList = ['/login', '/register', '/social-callback', '/register*', '/register/*'];
onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
  });
});
//监听路由变化
watch(route, (newValue, oldValue) => {
  whiteList.includes(newValue.path) ? isShow.value = false : isShow.value = true;
});
</script>
<style scoped>
.mainbox {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.miancenter {
  flex: 1;
  height: calc(100vh - 50px);
  overflow-y: hidden;
}
</style>
